<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
      xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-xhtml1.4-strict.dtd">
    <head>
        <link rel="stylesheet" href="styles.css" type="text/css" />
        <link rel="stylesheet" href="custom.css" type="text/css"/>
    </head>
    <body>
        <div class="pagewidth">
            <div class="page-wrap">
                <div class="content">

                    <!-- CONTENT -->
                    <wicket:extend>                

                        <h3><wicket:message key="animals">Animals: </wicket:message></h3> 

                        <a class="floatRight" wicket:id="createAnimalLink"><wicket:message key="animalNew">Create Animal</wicket:message></a><br/>

                        <form action="" wicket:id="AnimalFilterForm">
                            <label wicket:id="filterLabel">Filter set: </label> 
                            <label wicket:id="filterName">Filter name</label> 
                            <br/>

                            <label for="environments" wicket:id="environmentsLabel">Select Environment</label> 

                            <select class="animalListEnvs" id="environment" wicket:id="environmentsx"></select>

                            <input type="submit" wicket:message="value:filter" class="formbutton" name="filter" wicket:id="submitButton"/>
                            <input type="submit" wicket:message="value:cancelFilter" class="formbutton" name="cancel" wicket:id="cancelButton"/>

                        </form>

                        <table>


                            <!-- table header begin-->
                            <tr><th><wicket:message key="animalTableId">ID</wicket:message></th>
                                <th><wicket:message key="animalTableName">Name</wicket:message></th>
                                <th><wicket:message key="animalTableSpecies">Species</wicket:message></th>
                                <th><wicket:message key="action">Action</wicket:message></th></tr>
                            <!--table header end -->
                            <!-- table content begin -->
                            <tr wicket:id="listview">
                                <td><span wicket:id="id"> </span></td>
                                <td><span wicket:id="name"></span></td>
                                <td><span wicket:id="species"></span></td>
                                <td>
                                    <a wicket:id="edit">
                                        <wicket:message key="edit">edit</wicket:message>
                                    </a>
                                    &nbsp;&nbsp;
                                    <a wicket:id="delete">
                                        <wicket:message key="delete">delete</wicket:message>
                                    </a>
                                    &nbsp;&nbsp;
                                    <a wicket:id="prey">
                                        <wicket:message key="managePrey">prey</wicket:message>
                                    </a>
                                    &nbsp;&nbsp;
                                    <a wicket:id="predator">
                                        <wicket:message key="viewPredators">prey</wicket:message>
                                    </a>
                                </td>
                            </tr>
                            <!--table content end-->
                        </table>

                    </wicket:extend>

                    <!-- END CONTENT -->			
                </div>	
            </div>	
        </div>

    </body>
</html>